<template>
    <div class="iscroll-view">
        <slot name="view"></slot>
    </div>
</template>

<script>
let Scroll = null
if (process.BROWSER_BUILD) {
    Scroll = require('iscroll')
}
export default {
    props: [
        'orientation',
    ],
    data () {
        return {
            scrollInstance: null,
        }
    },
    methods: {
        isPassive () {
            var supportsPassiveOption = false
            try {
                addEventListener('test', null, Object.defineProperty({}, 'passive', {
                    get: function () {
                        supportsPassiveOption = true
                    },
                }))
            } catch (e) { }
            return supportsPassiveOption
        },
    },
    mounted () {
        let scrollX = false
        let scrollY = true
        if (this.orientation && this.orientation === 'horizontal') {
            scrollX = true
            scrollY = false
        }
        if (this.orientation && this.orientation === 'vertical') { }
        this.scrollInstance = new Scroll(this.$el, {
            scrollbars: true,
            mouseWheel: scrollY,
            scrollX: scrollX,
            scrollY: scrollY,
            interactiveScrollbars: true,
            shrinkScrollbars: 'scale',
            fadeScrollbars: scrollY,
            preventDefault: false,
            HWCompositing: false,
            preventDefaultException: { tagName: /^(BUTTON|A|DIV)$/ },
        })
        this.$on('refreshScrollView', function () {
            this.scrollInstance.refresh()
        })
        // document.addEventListener('touchmove', function (e) { e.preventDefault(); }, this.isPassive() ? {
        //     capture: false,
        //     passive: false
        // } : false);
    },
}
</script>

<style lang="scss">
.iscroll-view {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
</style>